<template>
  <view class="content ba_img">
    <view
      class="header"
      :style="{
        background: isHeadBack ? 'rgba(39,39,39)' : 'rgba(0,0,0,0)',
        paddingTop: statusBarHeight + 'px',
      }"
    >
      <view class="title">
        <u-subsection
          :list="list"
          mode="button"
          :current="curNow"
          bgColor="#55B877"
          activeColor="#fff"
          inactiveColor="#ADADAD"
          @change="sectionChange"
        ></u-subsection>
      </view>

      <u-tabs
        :current="currentIndex"
        :key="keys"
        class="tabs"
        :list="shanList"
        @click="tabClick"
        keyName="new_name"
        lineColor="#eee"
        lineWidth="64rpx"
        :activeStyle="{
          color: '#EEEEEE',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#ADADAD',
          transform: 'scale(1)',
        }"
      ></u-tabs>

      <view class="input_box" v-if="curNow == 0">
        <view class="inp">
          <u--input
            placeholder="搜索课程关联标签"
            border="none"
            placeholderStyle="font-size:30rpx;color:#ADADAD;"
            prefixIcon="search"
            prefixIconStyle="font-size: 42rpx;color: #ADADAD"
            color="#ADADAD"
            v-model="value"
            @change="change"
            inputAlign="left"
          ></u--input>
        </view>
      </view>
    </view>
    <scroll-view
      class="scroll_box"
      :style="{
        height: height + 'px',
        marginTop: height1 + 'px',
      }"
      :scroll-y="true"
      @scroll="scroll"
      @scrolltolower="scrolltolower"
    >
      <view class="box">
        <aoyiHall :isWhite="true" v-if="curNow == 0" :list="aoList"></aoyiHall>

        <view
          style="padding: 30rpx 0; box-sizing: border-box"
          v-if="curNow == 1"
        >
          <training :list="xunList"></training>
        </view>
      </view>
    </scroll-view>
	<floatingBall></floatingBall>
    <!-- <player ref="player" :show="show" @colse="colse"></player> -->
  </view>
</template>

<script>
import aoyiHall from "@/pages/stargate/components/aoyiHall.vue"; //奥义堂
import training from "./components/training.vue"; //训练营(打卡)
import { bofang_list, add_log } from "@/common/api/play.js"; // 播放
export default {
  components: {
    aoyiHall,
    training,
  },
  data() {
    return {
      keys: 0,
      statusBarHeight: 0,
      height: 0,
      height1: 0,
      windowHeihgt: 0,
      isHeadBack: false,
      list: ["奥义堂", "训练营"],
      curNow: 0,
      list1: [
        {
          name: "巴蜀-松",
        },
        {
          name: "云贵-静",
        },
        {
          name: "楚湘-定",
        },
        {
          name: "江南-慧",
        },
        {
          name: "岭南-难",
        },
        {
          name: "东北-冻",
        },
      ],
      shanList: [],
      currentIndex: 0,
      value: "",
      aoList: [],
      curId: 1,
      xunList: [],
      show: false,
      show1: true,
      page: 1,
      last_page: 0,
    };
  },
  async created() {
    // const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    // this.statusBarHeight = statusBarHeight.statusBarHeight;
    // this.windowHeihgt =
    //   statusBarHeight.windowHeight - statusBarHeight.statusBarHeight;

    // this.$nextTick(() => {
    //   uni
    //     .createSelectorQuery()
    //     .select(".header")
    //     .boundingClientRect((data) => {
    //       this.height = data.height;
    //       this.height1 = data.height;
    //       console.log(data.height, "高度");
    //     })
    //     .exec();
    // });
    await this.getShanHai();
    await this.getAoYi(1);
  },
  onShow() {
    this.show = false;
    this.show1 = true;
    if (this.$refs.player) {
      this.$refs.player.setIntervalT();
    }
  },
  onHide() {
    this.show = false;
    this.show1 = false;
    if (this.$refs.player && this.$refs.player.times) {
      clearInterval(this.$refs.player.times);
    }
  },
  mounted() {
    // uni.onTabBarMidButtonTap((res) => {
    // 	console.log("点开播放器");
    // });
    // uni.onTabBarMidButtonTap((res) => {
    //   // if (this.show1) {
    //   //   bofang_list({}).then((res) => {
    //   //     if (res.status == 200 && res.data.list && res.data.list.length) {
    //   //       this.show = true;
    //   //       this.$refs.player.getList();
    //   //     } else {
    //         // uni.navigateTo({
    //         //   url: "/pages/stargate/Tianwen",
    //         // });
    //         uni.navigateTo({
    //           url: "/pages/distinguish/galaxy",
    //         });
    //   //     }
    //   //   });
    //   // }
    // });

    // this.$forceUpdate();
  },
  methods: {
    // 获取各种高度
    getHeight() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
      this.statusBarHeight = statusBarHeight.statusBarHeight;
      // console.log(this.statusBarHeight, "状态栏高度");
      this.windowHeihgt = statusBarHeight.windowHeight;
      // console.log(this.windowHeihgt, "总高度");
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(".header").fields({
          size: true,
        });
        query.exec((data) => {
          // console.log(data, "各种高度");
          let sum = 0;
          data.forEach((item) => {
            sum += item.height;
          });
          this.height = this.windowHeihgt - sum;
          this.height1 = data[0].height;
          // console.log(data[0].height, "头部高度");
          // console.log(this.height, "滚动取高度");
        });
      });
      this.$nextTick(() => {
        // 解决uview u-tab，下划线异常
        this.currentIndex = 0;
      });
    },
    scroll(e) {
      if (e.target.scrollTop == 0) {
        this.isHeadBack = false;
      } else {
        this.isHeadBack = true;
      }
    },
    scrolltolower() {
      if (this.page == this.last_page || this.last_page == 0) {
      } else {
        this.page++;
        if (this.curNow == 1) {
          this.getXunLian(this.curId);
        } else {
          this.getAoYi(this.curId);
        }
      }
      console.log("触发");
    },
    // 奥义堂训练营切换
    sectionChange(index) {
      this.page = 1;
      this.last_page = 0;
      this.xunList = [];
      this.aoList = [];
      this.curNow = index;
      this.curId = 1;
      this.getHeight();
      if (index == 1) {
        this.getXunLian(this.curId);
      } else {
        this.getAoYi(this.curId);
      }
    },
    // 切换地区
    tabClick(e) {
      console.log(e);
      this.currentIndex = e.index;
      this.page = 1;
      this.last_page = 0;
      this.curId = e.id;
      this.xunList = [];
      this.aoList = [];
      if (this.curNow == 0) {
        this.getAoYi(e.id);
      } else {
        this.getXunLian(e.id);
      }
    },
    // 搜索
    change(val) {
      this.aoList = [];
      this.page = 1;
      this.last_page = 0;
      console.log(val);
      this.getAoYi(this.curId);
    },
    // 获取山海地区
    getShanHai() {
      this.$http
        .regionRegion({})
        .then((res) => {
          this.shanList = res.data.list;
          // this.is_yanxiu = res.data.is_yanxiu;
          // this.is_collect = res.data.is_collect;
          console.log(this.shanList, "山海地区");
          setTimeout(() => {
            this.getHeight();
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 获取奥义列表
    getAoYi(address) {
      this.$http
        .kechengAoyi({ address: address, search: this.value, page: this.page })
        .then((res) => {
          this.aoList = this.aoList.concat(res.data.list.data);
          this.last_page = res.data.list.last_page;
          console.log(this.aoList, "奥义列表");
          // this.getHeight()
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    colse() {
      this.show = false;
    },
    // 获取训练营列表
    getXunLian(address) {
      this.$http
        .kechengYanxiu({ address: address, type: 2, page: this.page })
        .then((res) => {
          this.xunList = this.xunList.concat(res.data.list.data);
          this.last_page = res.data.list.last_page;

          console.log(this.xunList, "训练营列表");
          // this.getHeight()
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.ba_img {
  position: fixed;
  margin: 0;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;

  .header {
    position: fixed;
    z-index: 999;
    width: 100%;
    // height: 120rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;

    .title {
      // width: 100%;
      width: 336rpx;
      // height: 120rpx;
      line-height: 120rpx;
      font-size: 38rpx;
      font-weight: 400;
      color: #eeeeee;
      text-align: center;
      margin-top: 20rpx;
      // position: fixed;
    }

    .jiahao {
      position: absolute;
      right: 30rpx;
      top: 40rpx;
    }
    .tabs {
      width: 100%;
      margin-top: 20rpx;
    }
    .input_box {
      padding: 0 30rpx;
      box-sizing: border-box;
      .inp {
        width: 100%;
        height: 80rpx;
        background: rgba(39, 44, 41, 0.5);
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        padding: 0 202rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin-top: 32rpx;
        margin-bottom: 32rpx;
      }
    }
  }
  .scroll_box {
    box-sizing: border-box;
  }
  .chooseItem {
    // padding-top: 40rpx;
  }
}

.slot-icon {
  width: 21px;
  height: 21px;
  background-color: $u-warning;
  border-radius: 100px;
  font-size: 12px;
  color: #fff;
  line-height: 21px;
  text-align: center;
}

.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;

  .inp {
    width: 100%;
    height: 80rpx;
    background: rgba(39, 44, 41, 0.5);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    padding: 0 202rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-top: 32rpx;
    margin-bottom: 32rpx;
  }
}

/deep/ .u-subsection--button {
  width: 336rpx;
  height: 74rpx;
  background: rgba(39, 39, 39, 0.5) !important;
  border-radius: 44rpx 44rpx 44rpx 44rpx;
  display: flex;
  align-items: center;
}

/deep/.u-subsection__item--first {
  width: 160rpx;
  height: 58rpx;
  // background: #55B877;
}

/deep/.u-subsection__bar {
  background: none;
}

/deep/.u-subsection__bar {
  width: 160rpx !important;
  height: 58rpx !important;
  background: #55b877;
  border-radius: 36rpx 36rpx 36rpx 36rpx !important;
}
</style>
